<template>
	<div class="vueForm">
		 
		<el-form   
			:model="model" 
			ref="from"   
			:rules="rules"  
			label-position="left"
			:size="size"
			:label-width="labelWidth"
			>
			<div  class="vueFromItem" 	v-bind:class="{'col-md-3':item.span==6,'col-md-6':item.span==12,'col-md-12':item.span==24}" v-for="item in data" v-show="!item.hide" > 
		 
				<el-form-item  
					:label="item.name"  
					v-if="!item.hideLabel"  
					:prop="item.code"  
				>  
		   		  	<slot v-if="item.slotName" :name="item.slotName" :data="item" ></slot>
		   		  	<vue-form-item v-else :data="item" v-model="model[item.code]" @change="change(item,$event)" ></vue-form-item>  
				</el-form-item>  
				<div  v-else> 
					<slot v-if="item.slotName" :name="item.slotName" :data="item" ></slot>
	   		  		<vue-form-item v-else :data="item" v-model="model[item.code]"  @change="change(item,$event)" ></vue-form-item>  
				</div> 
			</div> 
		</el-form>
	
	</div>
</template> 
<script>
	module.exports={
		props:{
			model:Object,
			data:Array,
			rules:Object,
			size:String,
			labelWidth:{
				type:String,
				'default':"80px"
			}
		},
		data:function(){
			return {
				
			}
		},
		methods:{
			change:function(val,value){
				this.$emit("change",{
					data:val,
					value:value
				}); 
			}
		}
		
		 
	}
</script>
<style>
	.vueForm{
		.vueFromItem{
			/*margin-top: 5px;*/
		}
		.el-form-item{
		 
		}
		.el-form-item>label{
			color: #000;
		}
		.el-form-item__content{
			>div{
				>.el-select,
				>.el-input-number{
					width: 100%;
				}
			}
		}
		
	}
</style>